<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>渐变</title>
		<link rel="stylesheet" type="text/css" href="css/reset-min.css"/>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-image: linear-gradient(red,green);
			}
			
			/* 
			 *发廊灯
			 */
			.box2{
				width: 50px;
				height: 150px;
				border: 1px solid;
				margin: 10px;
				overflow: hidden;
			}
			.box2 > .inner{
				height: 600px;
				background-image:repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
			}
			.box2:hover .inner{
				margin-top: -300px;
			}
			
			/**
			 * 光斑动画
			 */
			.box3{
				border: 1px solid;
				background-color: #000000;
				text-align: center;
			}
			.box3 > h1{
				color: rgba(255,255,255,.3);
				font:bold 80px "微软雅黑";
				display: inline-block;
				background-image: linear-gradient(120deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 260px);
				background-repeat: no-repeat;
				-webkit-background-clip: text ;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2">
			<div class="inner"></div>
		</div>
		
		<div class="box3">
			<h1>光斑动画</h1>
		</div>
	</body>
	<script type="text/javascript">
		// 循环发廊动画js
		var inner = document.querySelector(".box2 > .inner");
		var flag = 0;
		setInterval(function(){
			flag++;
			if(flag==300){
				flag = 0;
			}
			inner.style.marginTop = -flag + "px";
		},1000/60);
		
		// 循环光斑动画js
		var h1 = document.querySelector(".box3 > h1");
		var flag2 = -160;
		setInterval(function(){
			flag2+=10;
			if(flag2==600){
				flag2 =-160;
			}
			h1.style.backgroundPosition = flag2 + "px";
		},30);
	</script>
</html>
